<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">入库作业单编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="workNo" id="workNo" class="layui-input" type="text" placeholder="请输入入库作业单编号"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode" id="skuCode" class="layui-input" type="text" placeholder="请输入物料编码"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料名称：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuName" id="skuName" class="layui-input" type="text" placeholder="请输入物料名称"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">库位编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="warehouseShelfSpaceCode" id="warehouseShelfSpaceCode" class="layui-input" type="text" placeholder="请输入库位"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">仓库编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="warehouseCode" id="warehouseCode" class="layui-input" type="text" placeholder="请输入仓库编码"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">仓库：</label>
                                    <div class="layui-input-inline mr0">
                                        <select name="warehouseId" lay-filter="warehouseId" id="warehouseId" lay-search lay-verify="">
                                            <option value=""> 请选择仓库</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button type="button" class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit layui-form-keyDownSearch="true">查询</button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-btn-rows">
                    <div class="lay-btn-box">
                        <div class="lay-btn-lt">
                            <button id="workDetailBtnExport" class="layui-btn icon-btn color-green">导出</button>
                        </div>
                        <div class="lay-btn-rt">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 表格 -->
            <table class="layui-table" id="purchaseStorageWorkDetailTable" lay-filter="purchaseStorageWorkDetailTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="purchaseStorageWorkDetailTableBar">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="view">详情</a>
</script>




<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;

        admin.req('enterprisecab/warehouse/admin/warehouse/list', {limit: 9999}, function (res) {
            if (200 == res.code) {
                var optionHtml = '<option value=""> 请选择仓库</option>';
                for (var k = 0; k < res.data.length; k++) {
                    optionHtml += '<option value="' + res.data[k].id + '">' + res.data[k].name + '</option>';
                }
                $("select[name='warehouseId']").html(optionHtml);
                form.render('select');

            } else {
                layer.msg('获取仓库失败', {icon: 2, time: 1000});
            }
        }, 'GET');

        // 渲染表格1
        var insTb = table.render({
            elem: '#purchaseStorageWorkDetailTable',
            url: config.base + 'enterprise/purchase/admin/purchaseStorageWorkDetail/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', width: 50, title: "序号"}
                ,{field: 'workNo', align:'center', title: '入库作业单编号', width: 150}
                ,{field: 'skuCode', align:'center', title: '入库物料编码'}
                ,{field: 'skuName', align:'center', title: '入库物料名称'}
                ,{field: 'skuSpec', align:'center', title: '入库物料规格'}
                ,{field: 'warehouseName', align:'center', title: '入库仓库'}
                ,{field: 'quantity', align:'center', title: '入库数量'}
                ,{field: 'warehouseCode', align:'center', title: '仓库编码', width: 150}
                ,{field: 'warehouseAreaName', align:'center', title: '库区名称', width: 150}
                ,{field: 'warehouseShelfSpaceCode', align:'center', title: '库位编码'}

                ,{field: 'inDanPrice', align:'center', title: '入库单价', width: 150}
                ,{field: 'batchNumber', align:'center', title: '批次号'}

                ,{field: 'createTime', align:'center', title: '入库时间', width: 140}/*
                ,{align: 'center', toolbar: '#purchaseStorageWorkDetailTableBar', title: '操作',}*/
            ]]
        });

        // 工具条点击事件
        table.on('tool(purchaseStorageWorkDetailTable)', function (obj) {

        });

        //监听排序
        table.on('sort(purchaseStorageWorkDetailTable)', function(obj){
            table.reload('purchaseStorageWorkDetailTable', {
                initSort: obj,
                where: {
                    sort: obj.field,
                    order: obj.type
                }
            });
        });


        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field,page: {curr: 1}},'data');
        });

        // 重置搜索
        form.on('submit(resets)', function (data) {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            let field = data.field;
            for (let key in field) {
                field[key] = ''
            }
            insTb.reload({where: field, page: {curr: 1}}, 'data');
        });


        $('#workDetailBtnExport').click(function () {
            let skuCode = $('#skuCode').val();
            let skuName = $('#skuName').val();
            let warehouseCode = $('#warehouseCode').val();
            let warehouseId = $('#warehouseId').val();
            let warehouseShelfSpaceCode = $('#warehouseShelfSpaceCode').val();
            // 创建一个对象来保存所有可能的查询参数
            let queryParams = {
                skuCode: skuCode,
                skuName: skuName,
                warehouseCode: warehouseCode,
                warehouseId: warehouseId,
                warehouseShelfSpaceCode: warehouseShelfSpaceCode
            };

            // 过滤掉值为 undefined 的属性
            queryParams = Object.keys(queryParams)
                .filter(key => queryParams[key] !== undefined && queryParams[key] !== '')
                .reduce((obj, key) => {
                    obj[key] = queryParams[key];
                    return obj;
                }, {});

            // 将过滤后的参数对象转换为查询字符串
            let queryString = new URLSearchParams(queryParams).toString();

            // 获取当前日期和时间
            let now = new Date();
            let year = now.getFullYear();
            let month = String(now.getMonth() + 1).padStart(2, '0'); // 注意：getMonth() 返回值是 0-11
            let day = String(now.getDate()).padStart(2, '0');
            let hour = String(now.getHours()).padStart(2, '0');
            let minute = String(now.getMinutes()).padStart(2, '0');
            let second = String(now.getSeconds()).padStart(2, '0');

            // 格式化日期和时间为 YYYYMMDD_HHMMSS 形式
            let formattedDateTime = `${year}${month}${day}_${hour}${minute}${second}`;

            // 设置下载文件名为 "产品数据_YYYYMMDD_HHMMSS.xls"
            let fileName = `入库详情表_${formattedDateTime}.xls`;

            // 创建完整的URL，包括查询参数和文件名作为额外参数（如果后端支持的话）
            let fullUrl = config.base + 'enterprise/purchase/admin/purchaseStorageWorkDetail/export?' + queryString + '&fileName=' + encodeURIComponent(fileName);

            // 使用 window.open 打开新页面进行下载
            window.open(fullUrl + '&Authorization=Bearer ' + encodeURIComponent(config.getToken()), '_blank');
            // 注意：这里假设后端能够处理 fileName 参数，并根据它设置响应头中的 Content-Disposition 来指定下载文件名。
            // 如果后端不支持通过 URL 参数指定文件名，你可能需要调整后端代码来接受这种请求方式。
        });

    });
</script>